/*
 * @Author: 自迩
 * @Date: 2022-03-09 16:13:23
 * @LastEditTime: 2022-03-20 21:52:12
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\pages\bookshelf\index.js
 */
import BookItem from "../../components/bookItem";
import "./index.css";
import React, { useState,useContext } from "react";
import Upload from "../../components/upload";
import { BookListContext } from '../../App'
import Guide from "../../components/guide"

export default function Index() {
  const bookListContext = useContext(BookListContext);
  const bookList=bookListContext.bookListContext;

  //给上传按钮准备的上传成功事件处理
  function handleUploadSuccess(fileLists) {
    bookListContext.bookListDispatch({type:'addBooks',value:fileLists});
  }
  function handleDeleteBook(bookName){
    bookListContext.bookListDispatch({type:'deleteBooks',value:bookName});
  }

  return (
    <div className="bookshelfContainer">
      <Guide></Guide>
      <div className="list-inline">
        {/* 已添加的书 */}
        {bookList.map((value) => {
          return <BookItem
          bookDetail={value}
          key={value.bookName}
          deleteBook={handleDeleteBook}
          ></BookItem>;
        })}
        {/* 添加书的按钮 */}
        <Upload onSuccess={handleUploadSuccess}></Upload>
      </div>
    </div>
  );
}
